<template>
  <div class="bg-grey padding-b-56" id="docforms" v-show="loading">
    <van-cell-group class="group-class ">
      <van-cell :title="tpl.title" class="apply"/>

      <van-field label="标题" v-model="base.titles" placeholder="请输入标题" required class="form-title-class" input-align="right"/>
      <forms ref="forms" :form="form" :table="results"></forms>

      <van-cell title="正文" :label="tempPopupTarget.length <= 0?'请选择红头文件或在下方附件区上传附件':''" :value="tempPopupTarget.length > 0?'':'请选择'" is-link class="redHead" @click="showRedFile"/>
      <div class="checked-list" v-if="tempPopupTarget.length > 0">
        <span v-for="(target, index) in tempPopupTarget" :key="index">
          {{target.sealtitle}}
          <i class="van-icon van-icon-clear" @click="deleteRedFile(index)"></i>
        </span>
      </div>

      <form-file ref="formFiles" :files="fileData"></form-file>

      <div class='file-attachment-class'>
        <van-field
          class="textarea-field margin-b-10"
          label-class="field-left-class"
          v-model="base.message"
          rows="3"
          autosize
          label="签批意见"
          type="textarea"
          placeholder="请输入签批意见"
        />
        <van-field
          class="textarea-field"
          label-class="field-left-class margin-b-10"
          rows="1"
          disabled
          autosize
          label="流程附件"
          type="textarea"
        >
          <template slot="input">
            <!-- 编辑的时候显示的 -->
            <div class="file-class" v-for="(pre, preIndex) in preAttachment" :key="preIndex" @click="previewFile(pre.fileaddr)">
              <img class="img-class" :src="$common.fileIcon(fileName(pre.fileaddr, 'type'))">
              <p class="van-ellipsis name-width">{{ pre.filename }}</p>
              <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(preIndex,pre,preAttachment)"/>
            </div>
            <!-- 上传的 -->
            <div class="file-class" v-for="(file, fileIndex) in base.attachment" :key="fileIndex+'new'" @click="previewFile(file.url)">
              <img class="img-class" :src="$common.fileIcon(fileName(file.url, 'type'))">
              <p class="van-ellipsis name-width">{{ fileName(file.url, 'fullName') }}</p>
              <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(fileIndex,file,base.attachment)"/>
            </div>
            <van-uploader :after-read="(files) => afterRead(files, 'file', base.attachment)" 
              accept="*" />
          </template>
        </van-field>
      </div>

    </van-cell-group>

    <div class="bottom-btn">
      <van-row>
        <van-col span="7">
          <van-button type="default" size="large" class="default-class" @click="saveBtn">保 存</van-button>
        </van-col>
        <van-col span="17">
          <van-button type="info" size="large" class="info-class" @click="nextStepBtn">下一步</van-button>
        </van-col>
      </van-row>
    </div>

    <!-- 下一步弹出框 -->
    <van-popup v-model="nextVisiable" position="bottom" :close-on-click-overlay="false" 
    class="van-popup-height">
      <van-row class="next-row-class" >
        <van-col :span="4" class="row-cancel" @click="nextCancel">取消</van-col>
        <van-col :span="16" class="row-title">办理人员</van-col>
        <van-col :span="4" class="row-confirm" @click="nextConfirm">确认</van-col>
      </van-row>
      <van-cell title="下一步流程设定" required title-class="left-class" @click="processVisiable = true" class="flow-calss line-class"/>
      <van-radio-group class="next_radio_class" v-model="base.processValue">
        <van-cell-group>
          <van-cell v-for="(item,index) in nextStepData" :key="item.id" 
          :title="item.key" clickable @click="processConfirm(item)">
            <van-radio slot="right-icon" :name="item.key" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-cell title="办理人员" is-link required :value="base.flowuser" title-class="left-class" @click="showFlowPeople" class="flow-calss"/>
    </van-popup>

    <!-- 下一步流程设定 弹出框-->
    <van-popup v-model="processVisiable" position="bottom" :close-on-click-overlay="false">
      <van-picker class="processPicker" show-toolbar title="" :columns="nextStepData" 
      value-key="key" @cancel="processVisiable = false" />
    </van-popup>

    <!-- 办理人员下拉框 -->
    <van-popup v-model="flowShow" position="bottom" :safe-area-inset-bottom="true"
    :close-on-click-overlay="false">
      <van-row class="next-row-class">
        <van-col :span="4" class="row-cancel" @click="flowCancel">取消</van-col>
        <van-col :span="16" class="row-title">办理人员</van-col>
        <van-col :span="4" class="row-confirm" @click="flowConfirm">确认</van-col>
      </van-row>
      <van-search
        v-if="newflowuser.length >= 10"
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        show-action>
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
      <van-picker ref="peoplePicker" :columns="resultData" />
    </van-popup>
    
    <!-- 办理人员选择，多选 -->
    <van-popup v-model="flowShowMultiple" position="bottom" :safe-area-inset-bottom="true"
    :close-on-click-overlay="false" class="multiple-user">
      <van-row class="next-row-class">
        <van-col :span="4" class="row-cancel" @click="flowShowMultiple = false">取消</van-col>
        <van-col :span="16" class="row-title">办理人员</van-col>
        <van-col :span="4" class="row-confirm" @click="flowConfirmMultiple">确定</van-col>
      </van-row>
      <div style="padding-top: 52px;padding-bottom:55px;">
        <van-search
          v-if="newflowuser.length >= 10"
          v-model="searchValue"
          placeholder="请输入搜索关键词"
          show-action>
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
        <van-checkbox-group v-model="multipleResult" @change="multipleChange"
        ref="userCheckGroup">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in resultData"
              clickable
              :key="item"
              :title="item"
              @click="toggle(index)"
            >
              <van-checkbox slot="right-icon" shape="square" :name="item" ref="checkboxes" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
      <!-- 底部按钮 全选，反选 -->
      <van-row class="checkboxes-btn" >
        <van-col span="12">
          <van-button size="large" type="default" @click="toggleAll">反选</van-button>
        </van-col>
        <van-col span="12">
          <van-button size="large" type="info" @click="checkAll">全选</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!-- 办理人员选择，树状结构 ,所有人员 -->
    <van-popup v-model="flowShowAll" position="bottom" :safe-area-inset-bottom="true"
    :close-on-click-overlay="false" class="multiple-alluser" 
    :style="flowChangeTemp.length <= 0?'height: 78vh;':'height: 86vh'">
      <van-row class="next-row-class">
        <van-col :span="4" class="row-cancel" @click="flowShowAll = false">取消</van-col>
        <van-col :span="16" class="row-title">办理人员</van-col>
        <van-col :span="4" class="row-confirm" @click="flowAllConfirm">确定</van-col>
      </van-row>
      <div style="padding-top: 53px;">
        <side-choose v-if="flowShowAll" ref="flowChoose" :items="items" :default.sync="flowShowALLValue"  titleText="选择办理人员" :maxHeight="flowShowMore?'69vh':'62vh'" @changed="onlineFlowChanged"></side-choose>
      </div>
      <div class="bottom-btn-all">
        <!-- 收拢 -->
        <div v-if="flowChangeTemp.length > 0 && !flowShowMore" class="padding-12 font-size14">
          <van-row>
            <van-col span="4" class="font-color6">已选：</van-col>
            <van-col span="18" class="font-color3">
              <van-col span="19" class="van-ellipsis">
                <span v-for="(sign, index) in flowChangeTemp" :key="'sign'+index" class="more-class">{{sign.name}}</span>
              </van-col>
              <van-col span="5">等<span style="color: #1A76FF">{{flowChangeTemp.length}}</span>人</van-col>
            </van-col>
            <van-col span="2" class="align-right" @click="flowShowMore = true">
              <img src="../../assets/documents/triangle.png" width="10px" height="6px" />
            </van-col>
          </van-row>
        </div>
        <!-- 展开 -->
        <div v-if="flowChangeTemp.length > 0 && flowShowMore" class="padding-15 font-size14">
          <van-row type="flex" justify="space-between">
            <van-col span="4" class="font-color6">已选：</van-col>
            <van-col span="4" class="font-color6 align-right" @click="clearFlow('read')">清空</van-col>
          </van-row>
          <van-row class="margin-t-15" style="display: flex;align-items: flex-end;">
            <van-col span="22">
              <span v-for="(sign, index) in flowChangeTemp" :key="'more'+index" class="more-class">{{sign.name}}</span>
            </van-col>
            <van-col span="2" class="align-right" @click="flowShowMore = false">
              <img src="../../assets/documents/triangle_up.png" width="10px" height="6px" /></van-col>
          </van-row>
        </div>
      </div>
    </van-popup>

    <!-- 红头文件查询 -->
    <van-popup v-model="redpopup" position="bottom" style="max-height: 70vh;">
      <van-row class="next-row-class">
        <van-col :span="4" class="row-cancel" @click="redpopup = false">取消</van-col>
        <van-col :span="16" class="row-title">红头文件</van-col>
        <van-col :span="4" class="row-confirm" @click="redConfirm">确定</van-col>
      </van-row>
      <div class="popup-body" ref="popupBody" @scroll="popupScorlling">
        <div class="custom-checkbox" ref="checkboxSync">
          <div v-for="item in tempPopupField"  :class="{'checked': item.checked}" @click="itemClicked(item)">
            <van-icon name="checked" size="20" v-if="item.checked"/>
            <van-icon name="circle" size="20" color="#e5e5e5" v-else/>
            {{ item.sealtitle }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/javascript">
  import choosePeople from '@/components/ChoosePeople.vue'
  import forms from '@/components/Forms.vue'
  import formFile from '@/components/FormFile.vue'
  import sideChoose from '@/components/SideChoose.vue'
  export default {
    components: {
      'choose-people': choosePeople,
      'forms': forms,
      'form-file': formFile,
      'side-choose': sideChoose,
    },
    data() {
      return {
        formTitle: "",
        loading: false,
        activeStep: "",             //当前步骤
        apps:{},                    //基本数据
        base: {
          titles: '',
          processValue: "",         //下一步流程设定值
          flowuser: "",             //下一步办理人
          message:"",
          attachment: [],
          tplid: "",
          appid: "",
          perid: "",
          flowid: ""
        },
        tpl: "",                    //基本信息
        preAttachment: [],          //编辑的时候显示的附件
        preAttachmentType: '',
        items:[],
        nextVisiable: false,        //下一步弹出框
        processVisiable: false,     //下一步流程弹框控制器

        form: [],                   //高级表单
        results:[],                 //高级表单表格
        fileData: [],               //表单附件

        nextStep: "",               //下一步单选值的id
        nextStepData:[],            //步骤数据
        flowShow: false,            //办理人员控制器
        flowPeopleData:{            //办理人员数据
        
        },
        newflowuser:[],             //办理人员显示数组

        multipleResult: [],        //办理人员多选数组值
        flowShowMultiple: false,   //办理人员多选控制器
        flowkey2:'',               //判断是多人还是单人审批，1是多人，2是单人

        searchValue:"",             //下拉添加一个搜索框
        resultData:[],              //查询之后的数据

        redpopup: false,            //红头文件显示控制器
        redPage: 1,
        noMore: false,              // 是否还有更多
        tempPopupField: [],
        tempPopupTarget: [],
        tempScrolling: false,

        flowkey1:'',              //办理人是全员时
        flowShowAll: false,          //所有人员办理人控制器
        flowShowALLId: [],           //所有人员 选择后的id
        flowShowALLValue: [],        //所有人员 选择后的信息
        flowShowMore: false,         //显示更多办理人控制器
        flowChangeTemp: [],          //办理人员临时数组

        alreadyFile: false,          //判断是否执行默认保存表单方法
      }
    },
    activated() {
      this.$toast({
        duration: 0,
        forbidClick: true,
        className: 'loading-toast',
        icon: require('../../assets/loading.gif'),
      })
      this.formTitle = "",
      this.loading = false
      this.activeStep = "",//当前步骤
      this.apps = {}
      this.base = {
        titles: "",
        processValue: "",         //下一步流程设定值
        flowuser: "",             //下一步办理人
        message:"",
        attachment: [],
        tplid: "",
        appid: "",
        perid: "",
        flowid: ""
      },
      this.tpl = ""
      this.preAttachment = []
      this.preAttachmentType = ''
      this.nextVisiable = false,        //下一步弹出框
      this.processVisiable = false,     //下一步流程弹框控制器
      this.form = []
      this.results = [],                //审批流程
      this.fileData = [],               //表单附件
      this.nextStep = "",               //下一步单选值
      this.nextStepData = [],           //步骤
      this.flowShow = false
      this.flowPeopleData = {           //办理人员数据
        
      }
      this.newflowuser = []
      this.multipleResult = [],       //办理人员多选数组值
      this.flowShowMultiple = false,  //办理人员多选控制器
      this.flowkey2 = '',             //判断是多人还是单人审批，1是多人，2是单人
      this.searchValue="",//下拉添加一个搜索框
      this.resultData=[],//查询之后的数据

      this.alreadyFile = false
      this.redpopup = false,  //红头文件显示控制器
      this.tempPopupField = [],
      this.tempPopupTarget = []
      this.tempScrolling = false
      
      this.$bridge.callHandler('navTitle', {title: '公文表单'})
      this.$bridge.callHandler('navBack')
      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.go(-1)
        responseCallback('go(-1)')
      })

      // 流程图
      
      this.$bridge.callHandler('navRight', {title: "流程图"})
      this.$bridge.registerHandler('navRightClicked', (data, callBack)  => {
        this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/gojsChart?isnew=new&id=${this.$route.query.tplid}&type=1&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
      })

      if (this.$route.query.status == "edit") {
        this.base.perid = this.$route.query.perid
        this.base.flowid = this.$route.query.flowid
        this.base.tplid = this.$route.query.tplid
        this.base.appid = this.$route.query.appid
        this.preAttachmentType = 'new'
        this.baseFormData()
      } else if (this.$route.query.status == 'again') {
        this.base.perid = this.$route.query.perid
        this.base.flowid = this.$route.query.flowid
        this.base.tplid = this.$route.query.tplid
        this.base.appid = this.$route.query.appid
        this.preAttachmentType = 'new'
        this.baseFormDataAgain()
      } else {
        this.getform()
      }
      this.treeList()
    },
    watch: {
      'nextStep': {
        handler(newV, oldV) {
          if(newV) {
            this.flowPerson()
          }
        }
      },
      'searchValue': {
        handler(newV, oldV) {
          if(newV == '') { // 被关键字清空 还原列表项
            this.resultData = this.$common.deepCopy(this.newflowuser)
          }
        },
        deep: true
      },
      'tpl': {
        handler(newV, oldV) {
          if (newV && newV.flow_img) {
            // this.$bridge.callHandler('navTitle', {title: newV.title})
            // this.$bridge.callHandler("showProcessImg", {
            //   url: `${this.$common.filePath}${newV.flow_img}`
            // })
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'nextVisiable': {
        handler(newV, oldV) {
          if (this.nextVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShow': {
        handler(newV, oldV) {
          if (this.flowShow) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShowMultiple': {
        handler(newV, oldV) {
          if (this.flowShowMultiple) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShowAll': {
        handler(newV, oldV) {
          if (this.flowShowAll) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      // 正文 红头文件
      'redpopup': {
        handler(newV, oldV) {
          if (this.redpopup) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      /**
       * 返回方法
       * @return {[type]} [description]
       */
      backMethod() {
        if(this.$route.query.from && this.$route.query.from == 'origin') {
          this.$bridge.callHandler('close')
        } else {
          this.$router.go(-1)
        }
      },
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
       /**
       * 成功读取文件后 上传
       * @param  {[type]} file     [description]
       * @param  {[type]} formItem [description]
       * @return {[type]}          [description]
       */
      afterRead(file, type, formItem) {
        let self = this
        self.$bridge.callHandler('navKeepView')
        let formData = new FormData()
        formData.append('file', file.file)
        formData.append('do', 'file')
        this.$toast({
          message: '上传中...',
          duration: 0,
          overlay: true,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          headers: { //添加请求头
            'Content-Type': 'multipart/form-data'
          },
          url: `${this.$common.basePath}login.php`,
          data: formData,
          method: 'POST'
        }
        this.$axios(config).then(res => {
          self.$bridge.callHandler('cancelNavKeepView')
          // console.log(res)
          formItem.push({'url':res.data.url, 'name':self.fileName(res.data.url,'fullName')})
          this.$nextTick(_ => {
            this.$toast.clear()
          })
        }).catch(err => {
          self.$bridge.callHandler('cancelNavKeepView')
          console.log(err)
          this.$toast({
            icon: 'cross',
            message: err.msg ? err.msg : '上传失败!'
          })
        })
      },
      /**
       * 附件删除
       * @return {[type]} [description]
       */
      deleteFile(index,file,formItem) {
        // console.log(formItem)
        let self = this
        self.$bridge.callHandler('navKeepView')
        if (file.id) {
          this.$dialog.confirm({
            title: '提示',
            message: '是否确认删除该文件？删除后不可恢复'
          }).then(() => {
            self.$bridge.callHandler('cancelNavKeepView')
            // on confirm
            let config = {
              method: 'post',
              url: `${this.$common.basePath}aatp5/public/index.php/formfile/form_file/file_del`,
              data: {
                user_id: this.$store.state.userId,
                id: file.id
              }
            }
            this.$axios(config).then(res => {
              // console.log(res.msg)
              formItem.splice(index, 1)
            }).catch(err => {
              console.log(err)
            })
          }).catch((err) => {
            // on cancel
            console.log(err)
            self.$bridge.callHandler('cancelNavKeepView')
          });
        } else {
          this.$dialog.confirm({
            title: '提示',
            message: '是否确认删除该文件？'
          }).then(() => {
            self.$bridge.callHandler('cancelNavKeepView')
            // on confirm
            formItem.splice(index, 1)
          }).catch((err) => {
            // on cancel
            console.log(err)
            self.$bridge.callHandler('cancelNavKeepView')
          });
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 显示红头文件
       * @return {[type]} [description]
       */
      showRedFile () {
        this.tempPage = 1 // 打开popup后重新 查询第一页
        this.tempPopupField = []
        this.tempScrolling = true
        this.getRedFile()
      },
      /**
       * 查询红头文件
       */
      getRedFile () {
        let self = this
        let config = {
          method: "POST",
          url: `${self.$common.basePath}documentlist.php`,
          data: {
            user_id: self.$store.state.userId,
            do: "reddocument",
            page: self.redPage
          }
        }
        if (self.tempScrolling) {
          self.$toast({
            message: '正在查询',
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          self.$axios(config).then(res => {
            let data = self.$common.deepCopy(res.data.list)  
            data.forEach(item => {
              item.checked = false
              self.tempPopupTarget.forEach(i => {
                if(i.id == item.id) {
                  item.checked = true
                }
              })
            })
            self.tempPopupField = self.tempPopupField.concat(data)
            self.redpopup = true
            self.$nextTick(_ => {
              if(self.tempPage == 1) {
                self.$refs.popupBody.scrollTop = 0
              }
              self.$toast.clear()
              if(res.data.list.length == 0) {
                self.$toast({
                  message: '未查询到关联表单!',
                  icon: 'cross'
                })
              }
              self.noMore = res.data.next == 0 ? true : false
              self.tempScrolling = false
            })
          }).catch(err => {
            self.$nextTick(_ => {
              self.$toast({
                message: '未查询到关联表单!',
                icon: 'cross'
              })
              self.tempScrolling = false
            })
          })
        }
        
      },
      /**
       * 点击自定义列表项 将其选中
       * @param  {Object} item 所点击的列表对象
       */
      itemClicked(item) {
        !item.checked ? item.checked = true : item.checked = false
        this.tempPopupField = this.$common.deepCopy(this.tempPopupField)
      },
      /**
       * 确认选择
       * @return {[type]} [description]
       */
      redConfirm () {
        this.tempPopupTarget = this.tempPopupField.filter(item => {
          return item.checked == true
        })
        this.redpopup = false
      },
      /**
       * 删除红头文件
       * @return {[type]} [description]
       */
      deleteRedFile (index) {
        this.tempPopupTarget.splice(index, 1)
      },
      /**
       * 分页触底 查询下一页并拼接
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      popupScorlling(e) {
        if((e.target.scrollTop + this.$refs.popupBody.offsetHeight >= this.$refs.checkboxSync.offsetHeight) && this.popupVisible && !this.noMore) {
          this.tempScrolling = true
          this.redPage += 1
          this.getRedFile()
        }
      },
      /**
       * 树数据
       */
      treeList() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data:{
            do: "department"
          }
        }
        this.$axios(config).then(res => {
          let treeData = this.$common.deepCopy(res.data)
          for (var i = 0; i < treeData.length; i++) {
            treeData[i].text = treeData[i].name
            for (var j = 0; j < treeData[i].children.length; j++) {
              (treeData[i].children)[j].text = (treeData[i].children)[j].name;
              (treeData[i].children)[j].choosed = false
            }
          }
          this.items = this.$common.deepCopy(treeData)
          // console.log(this.items)
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 显示流程数据
       * @return {[type]} [description]
       */
      baseFormData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: 'appsadd',
            user_id: this.$store.state.userId,
            tplid: this.base.tplid,
            appid: this.base.appid,
            perid: this.base.perid,
            flowid: this.base.flowid
          }
        }
        this.$axios(config).then(res => {
          this.tpl = res.data.tpl
          this.apps = res.data.apps
          if (this.$route.query.status == "edit" && this.preAttachmentType == 'new') {
            this.base.titles = res.data.apps.title
            this.preAttachment = res.data.files
          }
          // 红头文件
          if (this.apps.fileid) {
            this.tempPopupTarget = this.apps.fileid
          }
          
          if (this.$route.query.status == 'edit' && this.formTitle != "提交") {
            this.form = res.data.from
            this.fileData = res.data.form_file
          }
          this.nextStepData = res.data.flownext //下一步流程设定

          if (res.data.flownext) {
            this.nextStepData = this.nextStepData.map(item => {
              return {
                key: item.flowname,
                id: item.fid
              }
            })
            if (this.nextStepData.length > 0) {
              this.nextStep = this.nextStepData[0].id //设置默认选中第一个
              this.base.processValue = this.nextStepData[0].key
            }
          }
          if (this.$route.query.status == 'edit') {
            this.$nextTick(_ => {
              this.loading = true
              setTimeout(_ => {
                this.$toast.clear()
              },100)
            })
          }
          if (this.formTitle == "提交") {
            this.$nextTick(_ => {
              this.$toast.clear()
              this.nextVisiable = true
            })
          }
          
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 重新提交接口
       * @return {[type]} [description]
       */
      baseFormDataAgain() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: 'appsadd',
            user_id: this.$store.state.userId,
            tplid: this.base.tplid,
            appid: this.base.appid,
            perid: this.base.perid,
            flowid: this.base.flowid
          }
        }
        this.$axios(config).then(res => {
          // console.log(res)
          this.tpl = res.data.tpl
          this.base.titles = res.data.apps.title
          this.preAttachment = res.data.files
          // 红头文件
          if (res.data.apps.fileid) {
            this.tempPopupTarget = this.apps.fileid
          }

          this.form = res.data.from //表单
          this.fileData = res.data.form_file  //表单附件
          this.nextStepData = res.data.flownext //下一步流程设定

          if (res.data.flownext) {
            this.nextStepData = this.nextStepData.map(item => {
              return {
                key: item.flowname,
                id: item.fid
              }
            })
            if (this.nextStepData.length > 0) {
              this.nextStep = this.nextStepData[0].id //设置默认选中第一个
              this.base.processValue = this.nextStepData[0].key
            }
          }

          this.$nextTick(_ => {
            this.loading = true
            setTimeout(_ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {

        })
      },
      /**
       * 生成表单的接口
       */
      getform () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "tablelist",
            tplid: this.$route.query.tplid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.form = res.data.from
          this.tpl = res.data.tpl
          this.fileData = res.data.form_file
          // console.log(this.form)
          this.$nextTick(_ => {
            this.loading = true
            setTimeout(_ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 下一步流程选择值
       * @return {[type]} [description]
       */
      processConfirm (e) {
        // console.log(e)
        this.base.processValue = e.key
        this.nextStep = e.id
        // this.processVisiable = false
        this.flowPerson()
      },

      /**
       * 选择下一步的办理人员
       * @return {[type]} [description]
       */
      flowPerson() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "flow",
            uid: this.$store.state.userId,
            fid: this.nextStep,
            flow_user_id: this.apps.uid,   //发起人id
          }
        }
        this.$axios(config).then(res => {
          let persons = res.data.flowuser //设置初始默认值
          persons = persons.split(",");
          // 去重
          let per = new Map();
          persons = persons.filter((item,index,array) => {
            return !per.has(item) && per.set(item, 1)
          })
          this.base.flowuser = persons.toString() //设置初始默认值
          this.flowPeopleData = res.data //存信息，后面'下一步'会用到
          this.newflowuser = res.data.newflowuser
          
          // flowkey1 判断是全员时
          this.flowkey1 = res.data.flowkey1
          if (res.data.flowkey1 == '1') {
            // 树状结构  默认人  就默认勾选
            this.flowShowALLValue = res.data.flowuser.split(",");
          }

          // flowkey2 用来判断是多人审批还是单人，1是多人，2是单人
          this.flowkey2 = res.data.flowkey2
          if (res.data.flowkey2 == 2) {
            // 将默认值加入到newflowuser中
            this.newflowuser.splice(0, 0, this.base.flowuser)
            // 去重
            let res = new Map();
            this.newflowuser = this.newflowuser.filter((item,index,array) => {
              return !res.has(item) && res.set(item, 1)
            })
          }
          this.resultData = this.newflowuser
          // 设置多人选择组件默认选择项，数组格式的
          this.multipleResult = res.data.flowuser.split(",")
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 所有人员办理人  确认框
       * @return {[type]} [description]
       */
      flowAllConfirm() {
        this.flowShowALLId = this.$refs.flowChoose.getChoosed();
        this.flowShowALLValue = this.$refs.flowChoose.getChoosedByName();
        //人员去重
        let res = new Map();
        this.flowShowALLValue = this.flowShowALLValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })

        this.flowShowALLValue = this.flowShowALLValue.map(item => {
          return item.name
        });
        this.base.flowuser = this.flowShowALLValue.toString();
        this.flowShowAll = false;

      },
      /**
       * 树状办理人  清空
       */
      clearFlow() {
        this.flowShowALLId = []
        this.flowShowALLValue = []
        this.flowChangeTemp = []
        this.flowShowMore = false
      },
      /**
       * 树状办理人 在线选人 去重
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onlineFlowChanged(e) {
        //人员去重
        let res = new Map();
        this.flowChangeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      /**
       * 点击搜索 过滤选项 
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onSearch(tempPopupField) {
        let result = this.newflowuser.filter(item => {
          return item.indexOf(this.searchValue) != -1
        })
        this.resultData = result
      },
      /**
       * 显示弹框
       * @return {[type]} [description]
       */
      showFlowPeople() {
        let self = this
        if (self.flowkey1 == '1') {
          this.flowShowAll = true
        } else {
          // flowkey2  判读1是多人，2是单人
          if (self.flowkey2 == '2') {
            self.flowShow = true
            self.$nextTick(_ => {
              self.$refs.peoplePicker.setValues([this.base.flowuser])
            })
          } else if (self.flowkey2 == '1') {
            self.flowShowMultiple = true
            self.$nextTick(_ => {
              // 将复选框默认选中状态
              // self.resultData.forEach((item,index) =>{
              //   if (self.base.flowuser == item) {
              //     self.$refs.checkboxes[index].toggle(true);
              //   }
              // })
            })
          }
        }
      },
      /** 办理人员取消 */
      flowCancel() {
        this.flowShow = false
      },
      /**
       * 办理人员点确定按钮
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      flowConfirm() {
        this.base.flowuser = this.$refs.peoplePicker.getValues()[0]
        this.flowShow = false
        this.searchValue = ''
      },
      /**
       * 多选人  改变事件
       * @return {[type]} [description]
       */
      multipleChange(e) {
        this.multipleResult = e
      },
      /**
       * 办理人员多选 确认按钮
       * @return {[type]} [description]
       */
      flowConfirmMultiple() {
        this.base.flowuser = this.multipleResult.toString()
        // console.log(this.base.flowuser)
        this.flowShowMultiple = false
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      /**
       * 保存之前生成表单
       * @return {[type]} [description]
       */
      beforeSave () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "documentadd",
            tplid: this.$route.query.tplid,
            tpltype: this.$route.query.tpltype,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.$toast.clear()
          // console.log(res.data)
          this.base.tplid = res.data.tplid
          this.base.appid = res.data.appid
          this.base.flowid = res.data.flowid
          this.base.perid = res.data.perid
          this.preAttachmentType = 'old'
          this.$nextTick(_ => {
            this.savePost()
          })
        }).catch(err => {
          this.$toast.clear()
          this.$toast.fail(err.msg)
        })
      },
      /**
       * 保存按钮
       */
      saveBtn() {
        if (this.base.titles == '') {
          this.$toast({
            icon: 'cross',
            message: '请输入标题'
          })
        }else if (!this.$refs.forms.getFormData()) {

        }else if (!this.$refs.formFiles.getFormData()) {

        }else {
          this.$bridge.callHandler('navKeepView')
          this.$dialog.confirm({
            title: '提示',
            message: '是否确认保存？'
          }).then(() => {
            this.$bridge.callHandler('cancelNavKeepView')
            this.$toast({
              duration: 0,
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
            // on confirm
            if (this.$route.query.status == 'edit') {
              this.savePost()
            }else {
              // 新增
              this.beforeSave()
            }
            
          }).catch(() => {
            // on cancel
            this.$bridge.callHandler('cancelNavKeepView')
          });
          
        }
      },
      /**
       * 提交保存
       * @return {[type]} [description]
       */
      savePost () {
        let redid = this.tempPopupTarget.map(item => {
          return item.id
        })
        let saveForm = this.$refs.forms.getFormData()
        saveForm.filesArray = this.$refs.formFiles.getFormData()
          saveForm.content = this.base.message
          let preArr = this.preAttachment.map(item => {
            return {'id': item.id, 'url':item.fileaddr,'name':item.filename}
          })
          saveForm.attachment = this.base.attachment.concat(preArr)
          saveForm.user_id = this.$store.state.userId
          saveForm.number = this.apps.number
          saveForm.title = this.base.titles
          saveForm.appid = this.base.appid
          saveForm.tplid = this.base.tplid
          saveForm.flowid = this.base.flowid
          saveForm.perid = this.base.perid
          saveForm.do = 'update'
          saveForm.fileid = redid
          saveForm.statusValue = this.$route.query.status || null
          let config = {
            method: "post",
            url: `${this.$common.basePath}document.php`,
            data: saveForm
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type: "success",
              message:'保存成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name:'handleList'})
              this.backMethod();
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2100)
          }).catch(err => {
            this.$toast.clear()
            console.log(err)
          })
      },
      /**
       * 下一步按钮
       * @return {[type]} [description]
       */
      nextStepBtn() {
        if (this.base.titles == '') {
          this.$toast({
            icon: 'cross',
            message: '请输入标题'
          })
        }else if (!this.$refs.forms.getFormData()) {

        }else if (!this.$refs.formFiles.getFormData()) {

        }else {
          this.preAttachmentType = 'old'
          if (this.$route.query.status == 'edit') {
            this.baseFormData()
            this.formTitle = "提交"
          } else {
            // 查询表单单号 是否存在
            if (this.apps && this.apps.number) {
              // 表单单号存在 就直接保存
              this.baseFormData()
              this.formTitle = "提交"
            } else {
              this.$bridge.callHandler('navKeepView')
              this.$dialog.confirm({
                title: "提示",
                message: "此操作将会生成新的表单，是否继续？"
              }).then(() => {
                this.$toast({
                  duration: 0,
                  forbidClick: true,
                  className: 'loading-toast',
                  icon: require('../../assets/loading.gif'),
                })
                // 生成表单后再调用流程接口，查询数据
                let config = {
                  method: "post",
                  url: `${this.$common.basePath}document.php`,
                  data: {
                    do: "documentadd",
                    tplid: this.$route.query.tplid,
                    tpltype: this.$route.query.tpltype,
                    user_id: this.$store.state.userId
                  }
                }
                this.$axios(config).then(res => {
                  this.$toast.clear()
                  // console.log(res.data)
                  this.base.tplid = res.data.tplid
                  this.base.appid = res.data.appid
                  this.base.flowid = res.data.flowid
                  this.base.perid = res.data.perid

                  this.$nextTick(_ => {
                    this.baseFormData()
                    this.formTitle = "提交"

                    setTimeout(_ => {
                      // 再执行默认保存方法---保存数据
                      let redid = this.tempPopupTarget.map(item => {
                        return item.id
                      })
                      let saveForm = this.$refs.forms.getFormData()
                        saveForm.filesArray = this.$refs.formFiles.getFormData()
                        saveForm.content = this.base.message
                        let preArr = this.preAttachment.map(item => {
                          return {'id':item.id, 'url':item.fileaddr,'name':item.filename}
                        })
                        saveForm.attachment = this.base.attachment.concat(preArr)
                        saveForm.user_id = this.$store.state.userId
                        saveForm.number = this.apps.number
                        saveForm.title = this.base.titles
                        saveForm.appid = this.base.appid
                        saveForm.tplid = this.base.tplid
                        saveForm.tpltype = this.$route.query.tpltype
                        saveForm.flowid = this.base.flowid
                        saveForm.perid = this.base.perid
                        saveForm.do = 'update'
                        saveForm.statusValue = this.$route.query.status || null
                        saveForm.fileid = redid

                        // alreadyFile 用来判断附件是否再次提交，执行默认保存方法就不用再提交了
                        this.alreadyFile = true

                        let config = {
                          method: "post",
                          url: `${this.$common.basePath}document.php`,
                          data: saveForm
                        }
                        this.$axios(config).then(res => {
                          console.log("执行默认保存方法成功")
                        }).catch(err => {
                          console.log(err)
                        })
                    },1500)
                  })
                }).catch(err => {
                  this.$toast.clear()
                  this.$toast.fail(err.msg)
                })
              }).catch(() => {
                this.$bridge.callHandler('cancelNavKeepView')
              })
            }

          }
          
        }
      },
      nextCancel () {
        this.nextVisiable = false
      },
      /**
       * 确认保存按钮
       * @return {[type]} [description]
       */
      nextConfirm () {
        if (this.base.flowuser == '') {
            this.$toast("请选择办理人员")
        }else {
          let persons = this.base.flowuser.split(",")
          let msg = "是否将流程转交给 " + persons[0] + " ？"
          if (persons.length > 1) {
            if (persons.length > 3) {
              msg = "是否将流程转交给 " + persons[0] + " 等办理？"
            }else if (persons.length <=2 && persons.length > 1) {
              msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ " 办理？"
            }else if (persons.length <=3 && persons.length > 1) {
              msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ ',' +persons[2]+ " 办理？"
            }
          }
          this.$bridge.callHandler('navKeepView')
          this.$dialog.confirm({
            title: '提示',
            message: msg
          }).then(() => {
            this.nextVisiable = false
            this.$toast({
              duration: 0,
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
            // on confirm
            let redid = this.tempPopupTarget.map(item => {
              return item.id
            })
            let nextForm = this.$refs.forms.getFormData()
            // 执行过默认保存，这里就不再提交附件了
            if (!this.alreadyFile) {
              nextForm.filesArray = this.$refs.formFiles.getFormData()
              let preArr = this.preAttachment.map(item => {
                return {'id':item.id, 'url':item.fileaddr,'name':item.filename}
              })
              nextForm.attachment = this.base.attachment.concat(preArr)
            }
            
            nextForm.do = "next_step",
            nextForm.user_id = this.$store.state.userId
            nextForm.user = this.base.flowuser
            nextForm.views = "personnel"
            nextForm.title = this.base.titles
            nextForm.appid = this.base.appid
            nextForm.tplid = this.apps.tplid
            nextForm.tpltype = this.apps.tpltype
            nextForm.perid = this.base.perid
            nextForm.flowid = this.base.flowid
            nextForm.content = this.base.message
            nextForm.fileid = redid
            nextForm.statusValue = this.$route.query.status || null
            // 以下是flowPeopleData存的数据，后台需要的
            nextForm.nextflowid = this.flowPeopleData.fid
            nextForm.nextappkey = this.flowPeopleData.flowkey2
            nextForm.nextappkey1 = this.flowPeopleData.flowkey3
            nextForm.nextflowdate = this.flowPeopleData.flowdate
            nextForm.nextflowdatetype = this.flowPeopleData.flowdatetype

            nextForm.pertype = '1' //审批类型  1通过 2拒绝
            let config = {
              method: "post",
              url: `${this.$common.basePath}document.php`,
              // url: `${this.$common.basePath}doc.php`,//测试服务器速度地址
              data: nextForm
            }
            this.$axios(config).then(res => {
              this.$toast.clear()
              this.$toast({
                type: "success",
                message:'提交成功',
                forbidClick: true,
                duration: 1500
              })
              setTimeout(_ => {
                this.$toast({
                  duration: 500,
                  forbidClick: true,
                  className: 'loading-toast',
                  icon: require('../../assets/loading.gif'),
                })
              },1500)
              setTimeout(_ => {
                // this.$router.push({name:'handleList'})
                this.backMethod();
                // 原生刷新页面
                this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
              },2100)
            }).catch(err => {
              console.log(err)
              this.$toast.clear()
            })
          }).catch((error) => {
            // on cancel
            console.log(error)
            this.$bridge.callHandler('navKeepView')
          });
        }
      },
      /**
       * 全选
       * @return {[type]} [description]
       */
      checkAll() {
        this.$refs.userCheckGroup.toggleAll(true);
      },
      /**
       * 反选
       * @return {[type]} [description]
       */
      toggleAll() {
        this.$refs.userCheckGroup.toggleAll();
      },
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .group-class {
    background-color: #F5F5F5;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  .bg-grey {
    background: #f5f5f5;
  }
  .padding-b-56 {
    padding-bottom: 66px;
  }
  .form-title-class {
    padding: 6.5px 16px;
    margin-bottom: 12px;
  }
  .redHead {
    padding: 6.5px 16px;

    .van-cell__right-icon {
      line-height: 35px;
      height: 35px;
    }
  }
  .checked-list {
    background-color: #fff;

    span {
      color: #1989fa;
      display: block;
      padding: 12px 20px;
    }
  }
  .custom-checkbox {
    height: 300px;
    padding: 15px;

    div {
      padding: 8px 15px;
    }
    .checked {
      color: #1989fa;
    }
    .van-icon {
      margin-top: 2px;
      float: right;
    }
  }
  .van-popup-height {
    min-height: 272px;
    max-height: 60vh;
  }
  // 底部按钮样式开始
  .bottom-btn {
    margin-top: 10px;
    padding: 3px 15px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: calc(100vw - 30px);
  }
  .default-class {
    border: none;
    color: #2E79FF;
  }
  .info-class {
    border-radius: 4px;
  }
  // 底部按钮样式结束
  .multiple-class {
    display: inline-flex;
    align-items: center;
    span{
      margin-right: 5px;
    }
  }
  .mul-left-class {
    max-height: 30px;
  }
  // 下一步流程设定 样式开始
  .container-class {
    padding: 15px ;
    background-color: #fff;
    margin-top: 12px;

    p {
      margin-top: 0;
      margin-bottom: 19px;
      font-weight: bold;
      font-size: 17px;
    }
    // 单选的
    .van-radio{
      margin-bottom: 15px;

      &:last-child{
        margin-bottom: 0;
      }
    }
    // 复选的
    .van-checkbox{
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  // 下一步流程设定 样式结束
  .apply {
    line-height: 28px;
    margin-bottom: 10px;
  }
  .flow-calss {
    line-height: 28px;
    margin-top: 10px;
  }
  .next-row-class {
    position: fixed;
    max-height: 22px;
    height: 22px;
    padding: 15px;
    width: calc(100vw - 30px);
    border-bottom: 1px solid #F5F5F5;
    z-index: 6;
    background-color: #fff;
  }
  .row-cancel {
    font-size: 17px;
    color: #333333
  }
  .row-title{
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }
  .row-confirm {
    font-size: 17px;
    color: #2E79FF;
    text-align: right;
  }
  .extr-area {
    margin-top: 12px;
    padding: 5px 15px;
    width: calc(100vw - 30px);
    font-size: 17px;
    background-color: #fff;
  }
  .extr-title {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
  // 附件样式开始
  .file-attachment-class{
    margin-top: 10px;
    background-color: #F5F5F5;

    .file-class {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 0;

      p {
        margin: 0;
      }

      .van-icon-clear {
        margin: 8px;
      }
    }
    .img-class {
      width: 20px;
      height: 23px;
      margin-right: 10px;
    }
    .name-width {
      max-width: calc(100% - 70px);
      min-width: calc(100% - 70px);
    }
  }
  .bottom-btn-all {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
  }
  .padding-12 {
    padding-top: 12px;
    padding-bottom:12px;
  }
  .padding-15 {
    padding-top: 15px;
    padding-bottom:15px;
  }
  .font-size14 {
    font-size: 14px;
  }
  .more-class:after {
    content: '、'
  }
  .more-class:last-child::after{
    content: ' '
  }
  .checkboxes-btn {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 30px);
    padding: 2px 15px;
    border-top: 1px solid #ebedf0;
    background-color: #fff;
  }
  .bottom-btn-all {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
  }
  .popup-body {
    margin-top: 50px;
  }
</style>
<style type="text/css" lang="less">
  #docforms {
    min-height: calc(100vh - 66px);
    .extr-people {
      .van-cell__right-icon {
        line-height: 33px;
      }
    }
    .client-class {
      width: 140px!important;
    }
    // 上传按钮样式开始
    .van-uploader__upload {
      width: 50px;
      height: 50px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
    }
    // 上传按钮样式结束
    
    .processPicker {
      .van-picker__cancel {
        font-size: 17px;
        color: #333;
      }
      .van-picker__confirm {
        font-size: 17px;
      }
    }
    .multiple-alluser {

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

      .van-search {
        padding-top: 63px;
      }
    }
    // 多人审批办理人员
    .multiple-user {
      max-height: 80vh;
      min-height: 40vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }
    }
    // 修改button默认颜色
    .van-button--default {
      border: none;
      font-size: 17px;
    }
    .line-class {
      margin-top: 60px;
      padding: 5px 15px;

      &:after{
        border: none;
        border-bottom: none;
      };
    }
    .next_radio_class {
      .van-cell {
        padding: 1px 15px;
      }

      &:after{
        border-bottom: 1px solid #ebedf0;
      }
    }
    .van-field__control--custom {
      display: block;
    }
  }
</style>
